<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="头像修改" name="first">
      <avatar></avatar>
    </el-tab-pane>
    <el-tab-pane label="密码修改" name="second">
      <el-form label-width="100px" style="width:500px;padding-top:50px;"  >
        <el-form-item label="旧密码:" :required="true"  >
          <el-input v-model.trim="oldPwd" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码:" :required="true"  >
          <el-input v-model.trim="newPwd" type="password"></el-input>
        </el-form-item>
        <el-form-item label="重复密码:" :required="true"  >
          <el-input v-model.trim="rePwd" type="password"></el-input>
        </el-form-item>
        <div style="padding-left:100px">
          <el-button @click="resetForm()">重 置</el-button>
          <el-button type="primary" @click="submitForm()">提 交</el-button>
        </div>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import Avatar from "@/components/Avatar";
import Admin from "@/api/user";
export default {
  data() {
    return {
      activeName: "first",
      oldPwd : '',
      newPwd : '',
      rePwd : ''
    };
  },

  components: { Avatar },

  computed: {},

  methods: {
    handleClick(tab) {},
    resetForm(){
      this.oldPwd = '';
      this.newPwd = '';
      this.rePwd = '';
    },
    submitForm(){
      if(!this.oldPwd || !this.newPwd || !this.rePwd){
        this.$message.error("请输入旧密码、新密码并重复输入新密码");
        return false;
      }
      if(this.newPwd != this.rePwd){
        this.$message.error("两次输入的新密码不相同");
        return false;
      }

      Admin.changePassword(this.oldPwd,this.newPwd).then(data => {
        this.$message({message : '修改成功',type : 'success'});
        this.resetForm();
      }).catch(err => {
        if(err.code == 3){
          this.$message.error("旧密码不正确");
        }else{
          this.$message.error("修改密码失败");
        }
      })

    }
  },

  mounted() {}
};
</script>
<style rel="stylesheet/less" lang="less" scoped>
</style>
